<template>
  <div class="wrap">
    <div class="swiperContaner">
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img :src="image" @click="look()" width="100%" />
        </van-swipe-item>
      </van-swipe>
      <img src="@/assets/point.png" alt="" class="point" @click="showOptions = true" />
    </div>
    <div class="bottomWrap">
      <div class="totalCount">
        <div class="price"><em>￥</em>{{ resGoodsDetail.price }}</div>
        <div class="commentCount">
          <em class="commentNum">销量：{{ resGoodsDetail.saleNum }}</em>
        </div>
        <div class="addCar" @click="show = true">规格</div>
      </div>
      <div class="goodsTitle">{{ resGoodsDetail.goodsName }}</div>
      <div class="greyLine"></div>
      <div class="goodsInfo">
        <div class="infoTitle">商品详情</div>
        <img :src="$imgUrl + resGoodsDetail.listImgUrl" alt="" class="goodsImg" />
        <div class="infoText" v-html="resGoodsDetail.detailsContent"></div>
      </div>
      <div style="height: 100px; width: 100%"></div>
    </div>
    <!-- 规格mask -->
    <div class="maskWrap" v-if="show">
      <div class="maskBg" @click="show = false"></div>
      <div class="chooseNumWrap">
        <div class="productItem productItem2">
          <img
            :src="$imgUrl + resGoodsDetail.listImgUrl"
            alt=""
            class="proPosterLeft proPosterLeft2"
          />
          <div class="proIntroRight3">
            <em class="price2 price3">{{ resGoodsDetail.goodsName }}</em>
            <!-- <p class="pleaseChoosekinds">请选择规格</p> -->
          </div>
        </div>
        <div class="kindsWrap">
          <div class="kindsTitle">规格分类</div>
          <div
            class="productItem"
            v-for="(item, index) in resGoodsDetail.goodsSpecsList"
            :key="index"
          >
            <img :src="$imgUrl + item.imageUrl" alt="" class="proPosterLeft" />
            <div class="proIntroRight2">
              <p class="proTitle2">{{ item.title }}</p>
              <p class="saleNum2">库存:{{ item.stock }}</p>
              <div class="priceWrap2">
                <em class="price2">￥{{ item.price }}</em>
              </div>
            </div>
          </div>
          <div class="sureClose" @click="show = false">关闭</div>
        </div>
      </div>
    </div>
    <!-- 遮罩层-举报、删除、回复： -->
    <div class="maskWrap" v-if="showOptions">
      <div class="maskBg" @click="showOptions = false"></div>
      <div class="chooseNumWrap">
        <div class="optionsItem" @click="jumpAddGoods">编辑商品</div>
        <div class="optionsItem" @click="deleGoods">删除商品</div>
        <div class="optionsItem dele" @click="showOptions = false">取消</div>
      </div>
    </div>
  </div>
</template>

<script>
import { Swipe, SwipeItem, Dialog, Stepper ,ImagePreview} from "vant";
import { apiGetGoodsDetails, apiDelGoods, apiDownGoods } from "@/request/api"; // api接口
export default {
  name: "App",
  data() {
    return {
      showOptions: false,
      GoodsId: this.$route.query.GoodsId,
      resGoodsDetail: "", //商品详情
      show: false,
      images: [],
    };
  },
  mounted() {
    document.querySelector("body").setAttribute("style", "background-color:#fff");
    this.getGoodsDetails();
  },
  methods: {
    // 查看图片
    look(){
     ImagePreview([this.images]);
    },
    //商品详情：
    getGoodsDetails() {
      apiGetGoodsDetails({
        id: this.GoodsId,
      }).then((res) => {
        this.resGoodsDetail = res.data;
        var bannerImgUrl = this.resGoodsDetail.bannerImgUrl.split(",");
        bannerImgUrl.map((item) => {
          this.images.push(this.$imgUrl + item);
        });
        console.log("resGoodsDetail", this.resGoodsDetail);
      });
    },
    //编辑商品：
    jumpAddGoods() {
      var that = this;
      Dialog.confirm({
        message: "商品下架后才可对商品进行编辑，是否下架商品?",
      })
        .then(() => {
          apiDownGoods({
            id: this.GoodsId,
          }).then((res) => {
            if (res.code == 200) {
              that.$toast.fail("下架成功");
              this.$router.push({
                path: "/pages/bAddGoods",
                query: {
                  GoodsId: this.GoodsId,
                },
              });
            }
          });
        })
        .catch(() => {});
    },
    //删除商品:
    deleGoods() {
      var that = this;
      Dialog.confirm({
        message: "确认此商品删除?",
      })
        .then(() => {
          apiDelGoods({
            id: this.GoodsId,
          }).then((res) => {
            if (res.code == 200) {
              that.$toast.fail("删除成功");
              that.$router.push({
                path: "/pages/bGoodsManng",
                query: {
                  //传递参数
                },
              });
            }
          });
        })
        .catch(() => {});
    },
  },
  created() {},
  components: {
    [Swipe.name]: Swipe,
    [SwipeItem.name]: SwipeItem,
    [Dialog.name]: Dialog,
    [Stepper.name]: Stepper,
    [ImagePreview.Component.name]: ImagePreview.Component,
  },
};
</script>

<style scoped>
.sureClose {
  width: 90%;
  margin: 10px auto;
  background-color: #181818;
  color: #fff;
  font-size: 14px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 20px;
}
.wrap {
}
.swiperContaner .van-swipe {
  margin-top: 15px;
  margin-bottom: 20px;
  width: 100%;
  height: 150px;
  background: #181818;
  box-shadow: 0px 6px 8px 0px rgba(148, 148, 148, 0.16);
}
.swiperContaner > img {
  width: 100%;
  height: auto;
}
.van-swipe-item {
  height: 150px;
}
.van-swipe-item img{
  /* height: 155px; */
}
.greyLine {
  height: 5px;
  width: 100%;
  background-color: #f2f4fa;
}
.bottomWrap {
  width: 100%;
  border-radius: 20px 20px 0px 0px;
  position: absolute;
  top: 150px;
  background: #fafbfc;
  padding-top: 10px;
}
.totalCount {
  overflow: hidden;
  padding: 0px 20px;
}
.price {
  float: left;
  color: #ff4646;
  font-size: 24px;
  margin-top: 4px;
}
.price em {
  font-size: 12px;
}

.commentCount {
  float: left;
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #999999;
  margin-top: 13px;
}
.commentNum {
  float: left;
  margin-left: 20px;
}
.saleNum {
  margin-left: 20px;
}
.addCar {
  float: right;
  background: #f48f5b;
  border-radius: 9px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
  padding: 4px 15px;
  margin-top: 10px;
}
.goodsTitle {
  font-size: 16px;
  font-weight: 500;
  color: #181818;
  padding: 14px 20px;
}
.salePrice {
  font-size: 9px;
  font-weight: 400;
  color: #ff5252;
  /* padding: 3px 8px; */
  border: 1px solid #ff5252;
  border-radius: 7px;
  width: 100px;
  margin-left: 20px;
  margin-bottom: 20px;
  text-align: center;
}
.salePrice em {
  font-style: normal;
}
.salePrice i {
  display: inline-block;
  width: 1px;
  height: 10px;
  background-color: #ff5252;
  margin: 0px 2px;
}
.goodsInfo {
  padding: 20px;
}
.infoTitle {
  font-size: 12px;
  font-weight: 300;
  color: #666666;
  line-height: 20px;
}
.goodsImg {
  border-radius: 20px;
  width: 100%;
  margin: 20px 0px;
}
.infoText {
  font-size: 12px;
  font-weight: 400;
  color: #000000;
  line-height: 16px;
}
.productListWrap {
  width: calc(100% - 30px);
  margin: 20px auto;
}
.productItem {
  overflow: hidden;
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.proIntroRight2 {
  width: 70%;
}
.proTitle2 {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 0px;
}
.saleNum2 {
  margin-top: 9px;
  font-size: 10px;
  font-weight: 300;
  color: #666666;
  text-align: left;
  margin-bottom: 0px;
}
.priceWrap2 {
  margin-top: 4px;
  display: flex;
  justify-content: space-between;
}
.price2 {
  font-size: 10px;
  font-weight: bold;
  color: #ff4646;
}
.addShoppingCar2 {
  padding: 5px 8px;
  height: 18px;
  line-height: 18px;
  background: #f48f5b;
  border-radius: 15px;
  font-size: 10px;
  font-weight: bold;
  color: #ffffff;
}
.maskWrap {
}
.maskBg {
  width: 100%;
  min-height: 100vh;
  opacity: 0.35;
  background-color: #000;
  position: fixed;
  top: 0;
}
.chooseNumWrap {
  width: 100%;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  border-radius: 20px 20px 0px 0px;
}
.chooseNumWrap2 {
}
.maskTitle {
  height: 50px;
  line-height: 50px;
}
.maskTitleleft {
  float: left;
  font-size: 14px;
  color: #000;
  margin-left: 40%;
}
.maskTitleRight {
  float: right;
  color: #666;
  margin-right: 15px;
}
.productItem2 {
  margin-bottom: 0px;
}
.proPosterLeft {
  width: 24%;
  height: 75px;
}
.proPosterLeft2 {
  width: 18%;
  height: auto;
  padding: 15px;
}
.proIntroRight3 {
  width: 70%;
  text-align: left;
  margin-top: 15px;
}
.pleaseChoosekinds {
  margin-top: 5px;
  font-size: 14px;
  color: #666;
}
.kindsWrap {
  text-align: left;
  width: calc(100% - 30px);
  margin: 0 auto;
}
.kindsTitle {
  border-top: 1px solid rgb(212, 210, 210);
  font-size: 14px;
  padding-top: 10px;
  margin-bottom: 10px;
}
.kindsList {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.kindsItem {
  background-color: #999999;
  color: #fff;
  padding: 5px;
  border-radius: 5px;
  font-size: 14px;
}
.kindsItemActive {
  background-color: #000;
}
.sizeImg {
  float: left;
  width: 50px;
  border-radius: 5px;
}
.sizeRight {
  float: left;
  margin-left: 10px;
}
.sizeName {
  font-size: 14px;
  margin-top: 5px;
}
.sizeCount {
  font-size: 12px;
  margin-top: 5px;
}
.sizePrice {
}
.sizeNum {
  padding-left: 10px;
}
.sureAdd {
  width: 100%;
  height: 40px;
  line-height: 40px;
  background: #181818;
  box-shadow: 0px 5px 20px 0px rgba(24, 24, 24, 0.26);
  border-radius: 25px;
  color: #fff;
  text-align: center;
  margin: 25px 0px;
}
.point {
  display: inline-block;
  width: 23px !important;
  height: 5px !important;
  position: fixed;
  right: 20px;
  top: 30px;
}
.optionsItem {
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #eee;
  color: #000;
  font-size: 14px;
  text-align: center;
}
.dele {
  background-color: #eee;
  border-radius: 20px;
  width: 90%;
  margin: 5px auto;
  height: 40px;
  line-height: 40px;
}
.shopCarBottom {
  position: fixed;
  bottom: 0px;
  width: 100%;
  height: 69px;
  background: #ffffff;
  box-shadow: 0px 3px 12px 0px rgba(0, 0, 0, 0.12);
  border-radius: 20px 20px 0px 0px;
}
.shoppingCar {
  float: left;
  position: relative;
  margin: 12px 20px;
}
.shoppingCarImg {
  width: 29px;
  height: auto;
  position: absolute;
}
.shoppingCarNum {
  display: inline-block;
  /* width: 14px;
  height: 14px;
  line-height: 14px; */
  background: #ff4646;
  border-radius: 50%;
  font-size: 10px;
  font-weight: 500;
  color: #ffffff;
  position: absolute;
  top: 0px;
  left: 25px;
  text-align: center;
  padding: 3px 5px;
}
.numWrap {
  float: left;
  margin-left: 36px;
}
.carTotalNum {
  text-align: left;
  font-size: 12px;
  font-weight: bold;
  color: #ff4646;
  margin: 10px 0px 5px 0px;
}
.totalNum {
  font-size: 10px;
  font-family: PingFang SC;
  font-weight: 300;
  color: #999999;
}
.goCount {
  float: right;
  margin: 8px 15px 0px 0px;
  width: 95px;
  height: 34px;
  line-height: 34px;
  background: #181818;
  border-radius: 17px;
  font-size: 14px;
  font-weight: 500;
  color: #ffffff;
  text-align: center;
}
</style>
